<template>
  <div class="login-box">
    <div class="back_img">
      <div class="login_left_title">
        <div class="top_txt">水果后台管理系统</div>
        <div class="bottom_txt">方便/高效/安全/快捷</div>
      </div>
      <img src="~@/assets/img/login_bg.png" alt />
      <div class="login-main">
        <div class="login-title"></div>
        <el-form
          :model="dataForm"
          :rules="dataRule"
          ref="dataForm"
          @keyup.enter.native="dataFormSubmit()"
          status-icon
        >
          <el-form-item prop="userName">
            <el-input
              v-model="dataForm.userName"
              placeholder="用户名"
              class="login-form-input"
              auto-complete="on"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="dataForm.password"
              type="password"
              placeholder="密码"
              class="login-form-input"
              auto-complete="on"
            ></el-input>
          </el-form-item>

          <div class="radiobox">
            <el-checkbox v-model="checked">记住用户名和密码</el-checkbox>
            <span style="float: right; color: #3e8ef7">忘记密码？</span>
          </div>
          <el-form-item>
            <el-button
              class="login-btn-submit"
              type="primary"
              @click="dataFormSubmit()"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { dologin } from "../common/Api/index";
export default {
  data() {
    return {
      checked: false,
      dataForm: {
        userName: "",
        password: "",
      },
      dataRule: {
        userName: [
          { required: true, message: "帐号不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
      },
      captchaPath: "",
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 提交表单
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          dologin({
            userName: this.dataForm.userName,
            password: this.dataForm.password,
            account: "管理员",
          }).then((res) => {
            if (res == "密码错误") {
              console.log(res);
              this.$message.error(res);
            } else {
              this.$message({
                message: "登陆成功",
                type: "success",
              });
              console.log(res);
              sessionStorage.setItem("user", JSON.stringify(res));
              this.$router.replace({ name: "main" });
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="scss">
html,
body {
  height: 100%;
}
@function px2rem($px, $font: 75) {
  @return ($px / $font) * 1rem;
}
@function px2Percent($px, $height: 950) {
  @return percentage($px/$height);
}
$userColor: #3e4a59;
$pwColor: #4b5461;
$font: 12px;
.login-box {
  min-height: 800px;
  min-width: 1400px;
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  overflow: hidden;
  .login_title {
    height: 83px;
    width: 359px;
    position: absolute;
    top: px2Percent(86);
    right: 20%;
  }
  .logo_txt {
    height: 57px;
    width: 206px;
    position: absolute;
    top: px2Percent(94);
    left: 382px;
  }

  .back_img {
    position: absolute;
    min-width: 1400px;
    height: 515px;
    width: 100%;
    left: 0;
    top: px2Percent(206);
    .login_left_title {
      width: 298px;
      height: 100%;
      position: absolute;
      left: 419px;
      top: 0;
      .top_txt {
        margin-top: 70px;
        height: 49px;
        font-size: 35px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 49px;
        letter-spacing: 1px;
      }
      .bottom_txt {
        height: 30px;
        font-size: 18px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 30px;
        letter-spacing: 5px;
      }
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  .login-main {
    position: absolute;
    top: 50%;
    right: 20%;
    margin-top: -193px;
    padding: 60px 40px 0;
    width: 360px;
    height: 386px;
    background-color: #fff;
    box-shadow: 0px 4px 27px 0px rgba(68, 94, 233, 0.25);
    border-radius: 10px;
    .login-form-input .el-input__inner {
      border {
        top: none;
        left: none;
        bottom: none;
      }
    }
  }
  .login-title {
    font-weight: 400;
    height: 16px;
    line-height: 16px;
    font-size: $font;
    color: $userColor;
  }
  .login-captcha {
    overflow: hidden;
    > img {
      width: 100%;
      cursor: pointer;
    }
  }
  .login-btn-submit {
    width: 100%;
    margin-top: 38px;
    letter-spacing: 4px;
  }
}
</style>
